<template>
	<view :class="currentTheme">
		<a-nabbar  :is-back="false" name="测本约车"/>
		<view class="u-padding-32">
		 <item-search placeholder="搜索发行或剧本" @change="setDown" v-model="name"></item-search>
		</view>
		<view class="u-flex sticky-tabs  u-padding-left-32 u-padding-right-32" :style="{top:top}">
			<view class="u-flex-1">
				<me-tabs v-model="indexCurrent"  :height="88" :tabs="tabs" @change="tabGetChange" activeColor="#765CFE" @tabTop="getTabTop"></me-tabs>
			</view>
			<view class="right-search u-flex u-row-center" @click="showSearchBox">
				<text class="u-font-32 box-title u-margin-right-10">筛选</text>
				<u-icon name="shaixuan" custom-prefix="index-custom-icon" size="27"></u-icon>
			</view>
		</view>
		<view class="content">
			<swiper :indicator-dots="false" :autoplay="false" :style="swiperStyle"  :duration="300" :current="tabIndex" @change="getChange">
				<swiper-item  v-for="(a,b) in tabs" :key="b" >
					<mescroll-item :tabIndex="b" :tab="a" :inputName="name" :categoryIds="categoryIds" ref="mescroll"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>
		<u-popup mode="bottom" v-model="searchPopFlag" borderRadius="26" :mask-close-able="maskClickFlag">
			<view class="pop-title u-text-center u-font-36 box-title text-bold">筛选</view>
			<view class="u-padding-left-32 u-padding-right-32">

				<view class="u-font-32 box-title search-item-title text-bold">时间</view>
				<view class="search-container">
					<view v-for="(item,index) in dayList" :key="index">
						<view class="u-text-center day-item" @click="setDayIndex(index)" :class="{'day-item-active':dayIndex==index}">{{item.label}}</view>
					</view>
				</view>

				<view class="u-font-32 box-title search-item-title text-bold">车次类型</view>
				<view class="search-container">
					<view class="u-padding-25 time-list" >
						<u-row  gutter="20" >
							<u-col :span="4" v-for="(item,index) in timeList" :key="index">
								<view class="u-text-center time-item" @click="setTimeIndex(index)" :class="{'time-item-active':timeIndex==index}">{{item.label}}</view>
							</u-col>
						</u-row>
					</view>
				</view>

				<view class="search-box-btns u-flex">
					<view class="reset-btn search-btn u-flex-1 u-font-32 box-title text-bold" @click="resetTime">
						重置
					</view>
					<view class="confirm-btn search-btn u-flex-1 u-font-32 text-white text-bold" @click="confirmSearch">完成</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import swiperList from '@/mixins/swiperList.js'
	import MescrollItem from "./swiperItem.vue";
	import pageMixins from '@/pages/pageMixins.js'
	import carManager from '@/mixins/carManager.js'
	import dayjs from 'dayjs'
	import itemSearch from '@/components/itemSearch/itemSearch.vue'
	export default {
		mixins:[swiperList,pageMixins,carManager],
		data() {
			return {
				itemStyle:{
					color:'#B0B2D8'
				},
				tabs:[],
				otherHeight:'318rpx',
				name:'',
				categoryIds:[],
				timer:null,
				dayList:[{
					label:'今天',
					value:''
				},{
					label:'明天',
					value:''
				},{
					label:'后天',
					value:''
				}],
				timeList:[{
					label:'白天车',
					value:'05:00:00-17:00:00'
				},{
					label:'晚车',
					value:'17:00:00-23:00:00'
				},{
					label:'修仙车',
					value:'23:00:00-05:00:00'
				}],
				dayIndex:null,
				timeIndex:null,
				isFullList:[{
					label:'全部',
					value:null
				},{
					label:"未满员",
					value:false
				},{
					label:'已满员',
					value:true
				}],
				isFullValue:null,
				isFullFlag:false,
				searchPopFlag:false,
				maskClickFlag:true
			}
		},
		computed: {
			isFullObj() {
				return this.isFullList.find(val=>val.value===this.isFullValue); 
			},
			isFilterFlag(){
				return this.tabIndex===0 && this.indexCurrent===0
			}
		},
		components: {
			MescrollItem,itemSearch
		},
		onLoad() {
			//显示页面全部重置
			this.tabs = [
				{name:'未测', list: null, num:0, y:0,curPageLen:0, type:0, hasNext:true,showEnrollTime:1,userType:this.isAuth}
			]
			if(this.$store.getters.loginForm.uid){
				this.tabs.push({name:'已测', list: null, num:0, y:0, curPageLen:0,type:2, hasNext:true,showEnrollTime:1,userType:this.isAuth})
			};
			const nowTime = this.$store.getters.loginForm.systemTime;
			this.dayList = this.dayList.map((val,index)=>{ //今天明天后天
				val.value = dayjs(nowTime).add(index, 'day').format('YYYY-MM-DD')
				val.label = dayjs(nowTime).add(index, 'day').format('MM月DD日')
				return val
			})
		},
		methods: {
			setDown(){
				const ref = this.$refs.mescroll[this.tabIndex];
				ref.form.name = this.name;
				ref.downCallback()
			},
			//选中与取消选择时间
			setDayIndex(index){
				this.setTimeDay(index,'dayIndex')
			},
			//选中与取消选择时间
			setTimeIndex(index){
				this.setTimeDay(index,'timeIndex')
			},
			//设置时间和时段的区别
			setTimeDay(index,prototype){
				if(index===this[prototype]){
					this[prototype] = null;
					this.getSelectTime()
					return false;
				}
				this[prototype] = index;
				this.getSelectTime()
			},
			//拼接选中的时间
			getSelectTime(){
				const day = this.getTimeObj(this.dayList,this.dayIndex);
				let time = this.getTimeObj(this.timeList,this.timeIndex);
				time = time.value ? time.value.split('-'):['00:00:00',"23:59:59"];
				//if(day.value) time = time.map(val=>day.value+' '+val)
				const ref = this.unTestRef()
				ref.form.queryTimeInterval = time; //时段
				ref.form.queryTime = day.value //时间
				//ref.downCallback()
			},
			unTestRef(){
				return this.$refs.mescroll[0];
			},
			getTimeObj(list,index){
				return index!=null?list[index]:{};
			},
			//显示隐藏是否满员下拉
			toggleFull(){
				this.isFullFlag = !this.isFullFlag
			},
			//设置选中
			setFullItem(item){
				this.isFullValue = item.value;
				const ref = this.unTestRef()
				ref.form.isFullPeople = this.isFullValue; //时段
				ref.downCallback()
				this.toggleFull()
			},
			//设置mask
			setMask(){
				this.isFullFlag = false;
			},
			showSearchBox(){
				this.searchPopFlag = true;
			},
			//确认筛选条件
			confirmSearch(){
				this.searchPopFlag = false;
				const ref = this.unTestRef()
				ref.downCallback()
			},
			// 重置
			resetTime(){
				this.setDayIndex(this.dayIndex)
				this.setTimeIndex(this.timeIndex)
				this.searchPopFlag = false;
				this.confirmSearch();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.sticky-tabs{
		z-index: 990;
		position: sticky;
	}
	.day-item{
			color:var(--color-lightGrey);
			&-active{
				color: var(--theme-color);
				font-weight: bold;
			}
		}
	.time-list{
		.time-item{
			height: 64rpx;
			background-color:var(--background-three-color) ;
			color:var(--reversal-color);
			text-align: center;
			line-height: 64rpx;
			border-radius: 50rpx;
			border:1px solid var(--line-color);
			&-active{
				color: var(--background-three-color);
				background-color:var(--theme-color) ;
				border:1px solid var(--theme-color);
			}
		}
	}
	.right-search{
		width: 30.5vw;
		position: relative;
		&::before{
			content: "";
			position: absolute;
			width: 1rpx;
			height: 29rpx;
			border-left: 1rpx solid var(--line-color);
			top: 50%;
			left: 0;
			margin-top: -15rpx;
		}
	}
	.pop-title{
		line-height: 104rpx;
	}
	.search-item-title{
		margin-bottom: 24rpx;
	}
	.search-container{
		// width: 365rpx;
		margin: 0 auto 64rpx;
	}
	.search-box-btns{
		margin-bottom: 60rpx;
		.search-btn{
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
		}
		.reset-btn{
			background: var(--background-second-color);
			border-radius: 44rpx 0 0 44rpx;
		}
		.confirm-btn{
			background: var(--theme-color);
			border-radius: 0 44rpx 44rpx 0;
		}
	}
</style>